<template>
	<div class="viewAccoutSet">
		<div class="title relative">{{status === 0 ? '查看账套' : '账套信息'}}<span class="close absolute" @click="$store.commit('loginStore/updateStatus', 2);"></span></div>
		<div class="cnt bj">
			<div class="loginIndex" v-if="status === 0">
				<el-form :model="formData" :rules="formRules" ref="formRef" :show-message="false">
					<el-form-item prop="phone">
		                <el-input v-model.trim="formData.phone" clearable placeholder="手机号" maxLength="11"></el-input>
		            </el-form-item>
		            <el-form-item prop="verifyCode" class="verifyCode">
		                <el-input v-model.trim="formData.verifyCode" placeholder="输入验证码" maxLength="6"></el-input>
		                <button type="button" class="codeBtn right disabled" v-if="isDisabled">发送验证码</button>
		                <button type="button" class="codeBtn right" v-else @click="sendCode($event, time)">发送验证码</button>
		            </el-form-item>
		            <el-form-item>
		            	<el-button type="primary" @click="save('formRef')">确认</el-button>
		            </el-form-item>
				</el-form>
			</div>
			<div style="height: 100%;padding: 3px;" v-else>
				<el-scrollbar style="height: 100%" v-if="accoutSetArray.length > 0">
					<ul>
						<li v-for="(item, index) in accoutSetArray" :key="index">
							<div>账 套 名：<textarea class="name" ref="aa" readonly> {{item['account_set']}}</textarea> <span class="copy" @click="copyText($refs.aa[index])">复制账套名</span></div>
							<div>公司名称： {{item['company_name_chinese']}}</div>
						</li>
					</ul>
				</el-scrollbar>
				<span class="noData" v-else>暂无数据</span>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			formData: {},
			formRules: {
				phone: [{required: true, triggle: 'blur'}],
                verifyCode: [{required: true, triggle: 'blur'}]
			},
			isDisabled: true,
			isRunning: false,   //验证码是否正在倒计时
			accoutSetArray: [],		//存储所有账套信息
			status: 0
		}
	},
	computed: {
        time() {
            return this.$store.state.loginStore.time;
        }
    },
	watch: {
        'formData.phone'(newVal) {  //监听手机号码的位数
            if(this.isRunning) {
                //如果验证码正在倒计时，取消禁用状态
                this.isDisabled = false;
            } else {
                //如果验证码不在倒计时，判断手机号位数是否等于11位，不等于11位就禁用按钮点击
                newVal.length !== 11 ? this.isDisabled = true : this.isDisabled = false;
            }
        },
        isRunning(newVal) {
            if(newVal) {
                //如果验证码正在倒计时，取消禁用状态
                this.isDisabled = false;
            } else {
                //如果验证码不在倒计时，判断手机号位数是否等于11位，不等于11位就禁用按钮点击
                let phone = this.formData['phone'];
                phone.length !== 11 ? this.isDisabled = true : this.isDisabled = false;
            }
        }
    },
	methods: {
		sendCode(ev, time) {        //发送验证码
            //发送验证码之前先校验手机号是否合法
            if(!this.$util.checkPhone(this.formData['phone'])) {
                this.$alert('手机号格式不正确', '注册提示', {
                    confirmButtonText: '确定'
                });
                return false;
            }
            //开始后台校验
            this.$http('verify/phoneAccountset?phone=' + this.formData['phone']).then(res => {
                if(res.data.code == 20001) {
                    this.$alert(res.data.data || '验证码发送成功', '登录提示', {
                        confirmButtonText: '确定'
                    });
                    let timer = null,
                        elem = ev.target;
                    timer = setInterval(() => {
                        if(time <= 1) {
                            clearInterval(timer);
                            elem.innerHTML = '发送验证码';
                            this.isRunning = false;
                        } else {
                            time--;
                            elem.innerHTML = time;
                            this.isRunning = true;
                        }
                    }, 1000);
                } else {
                    this.$alert(res.data.msg || '验证码发送失败', '登录提示', {
                        confirmButtonText: '确定'
                    });
                }
            });
        },
		copyText(textarea) {
			this.$util.copyData(textarea, '账套名复制成功');
		},
		save(formName) {		//保存
			this.$refs[formName].validate((valid) => {
                if (valid) {
                	if(!this.$util.checkPhone(this.formData['phone'])) {
                        this.$alert('手机号格式不正确', '注册提示', {
                            confirmButtonText: '确定'
                        });
                        return false;
                    }
                    //后台数据校验
                    this.$http.post('register/lostAccountSet?phone=' + this.formData['phone'] + '&verifyCode=' + this.formData['verifyCode']).then(res => {
                    	if(res.data.code == 20001) {
                    		this.status = 1;
                    		if(res.data.data) {
                    			let data = res.data.data;
								this.accoutSetArray.length = 0;
								data.forEach(item => {
									if(item != null) {
										this.accoutSetArray.push(item);
									}
								});
                    		}
                    	}
                    });
                }
            });
		}
	}
}
</script>
<style scoped>
	.viewAccoutSet {
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 2px;
		width: 400px;
		height: 240px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -200px;
		margin-top: -120px;
	}
	.title {
		line-height: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 16px;
		letter-spacing: 1px;
		background-color: #f1f1f1;
	}
	.title .close {
		cursor: pointer;
		width: 16px;
		height: 16px;
		right: 15px;
		top: 12px;
		background: url(../../assets/images/close.png) no-repeat;
		background-size: 100% 100%;
	}
	.title .close:hover {
		background: url(../../assets/images/close-active.png) no-repeat;
		background-size: 100% 100%;
	}
	.cnt {
		height: calc(100% - 40px);
		overflow: hidden;
	}
	.loginIndex {padding: 15px;}
	.cnt ul {list-style-type: none;box-sizing: border-box;padding: 7px 15px 7px 7px;}
	.cnt ul > li {line-height: 22px; border: 1px solid #d9d9d9; box-sizing: border-box;padding: 5px 15px;border-radius: 2px;}
	.cnt ul > li:last-child {margin-bottom: 10px;}
	.cnt ul > li + li {margin-top: 10px;}
	textarea {border: none;font-size: 16px;line-height: 12px;height: 12px;outline: none;resize: none;overflow: hidden;}
	.copy {color: #fff;font-size: 12px;background-color: #42a1ff;float: right;border-radius: 2px;padding: 0 10px;cursor: pointer;}
	.noData {
		height: 100%;
	    padding: 3px;
	    color: #666;
	    line-height: 1;
	    margin-top: 80px;
	}
</style>